import { defineComponent, PropType, useAttrs } from 'vue'
import { MenuItem } from './type'
import { toLine } from '../../utils/index'
import * as Icon from '@element-plus/icons-vue'
import './index.scss'
import { ElSubMenu, ElMenuItem, ElMenu} from 'element-plus'

export default defineComponent ({
    props: {
        data: {
            type: Array as PropType<MenuItem[]>,
            required: true
        },
        defaultActive: {
            type: String,
            default: ''
        },
        router: {
            type: Boolean,
            default: false
        }
    },
    setup(props, ctx) {
        // console.log(props.data);
        let renderMenu = (data: MenuItem[]) => {
            return data.map((item: MenuItem) => {
                item.i = (Icon as any)[item.icon!]
                // jsx定义slot
                let slots = {
                    title: () => {
                        return <>
                            <item.i />
                            <span>{item.name}</span>
                        </>
                    }
                }
                // 递归渲染子菜单
                if (item.children && item.children.length) {
                    return (
                        <ElSubMenu index={item.index} v-slots={slots}>
                            {renderMenu(item.children)}
                        </ElSubMenu>
                    )
                }
                return (
                    <ElMenuItem index={item.index}>
                        <item.i />
                        <span>{item.name}</span>
                    </ElMenuItem>
                )
            })
        }
        let attrs = useAttrs()
         return () => {
            return  (
                <ElMenu
                default-active={props.defaultActive}
                router={props.router}
                {...attrs}
                >
                    {renderMenu(props.data)}
                </ElMenu>
            )
         }
    }
})
